<html>
        <head>
            <title>003CSS火焰</title>
            <meta charset="utf-8">
            <style>
                a:link, a:visited, a:hover, a:active{
                    color: #2C58E7;
                    text-decoration: none;
                }
                html, body{
                    width: 100%;
                    height: 100%;
                    margin: 0;
                    padding: 0;
                    background-color: black;
                }
                #container{
                    position: absolute;
                    left: 50%;
                    transform:translateX(-50%);

                    width: 800px;
                    height: 500px;
                    background-color: black;
                    border: 1px solid black;
                }
                #flame{
                    position: absolute;
                    margin: auto;
                    left:0; right:0; top:0; bottom:0;
                    
                    width: 0;
                    height: 50px;
                    background-color: transparent;

                    border-left: 100px solid transparent;
                    border-right: 100px solid transparent;
                    border-bottom: 200px solid #b5932f;

                    transform: scaleX(.4);

                    filter: blur(20px) contrast(30);

                }
                .dot{
                    position: absolute;
                    width: 30px;
                    height: 30px;
                    background-color: black;

                    left: 20px;
                    top: 200px;
                }
                @keyframes move{
                    100% {
                        transform: translate3d(0, -400px, 0);
                    }
                }
            </style>
        </head>
    
        <body>
            <div id="container">
                <div id="flame">
                        <div class="dot"></div>
                        <div class="dot"></div>
                        <div class="dot"></div>
                        <div class="dot"></div>
                        <div class="dot"></div>
                        <div class="dot"></div>
                        <div class="dot"></div>
                        <div class="dot"></div>
                        <div class="dot"></div>
                        <div class="dot"></div>
                        <div class="dot"></div>
                        <div class="dot"></div>
                        <div class="dot"></div>
                        <div class="dot"></div>
                        <div class="dot"></div>
                        <div class="dot"></div>
                        <div class="dot"></div>
                        <div class="dot"></div>
                        <div class="dot"></div>
                        <div class="dot"></div>
                        <div class="dot"></div>
                        <div class="dot"></div>
                        <div class="dot"></div>
                        <div class="dot"></div>
                        <div class="dot"></div>
                        <div class="dot"></div>
                        <div class="dot"></div>
                        <div class="dot"></div>
                </div>
            </div>
        </body>

        <script>
            var dots = document.querySelectorAll(".dot");
            Array.prototype.forEach.call(dots, dot=>{
                dot.style.top =  Math.ceil(Math.random()*600) + 'px';
                dot.style.left = Math.ceil(150 - Math.random()*300) + 'px';
                let time = Math.ceil(Math.random()*100) % 2 + 2;
                dot.style.animation = "move "+time+"s infinite";
            });
            Array.prototype.forEach.call(dots, dot=>{
                console.log(dot.style.animation);
            });
        </script>

    </html>